<!-- 修改密码 views/EditPsw.vue -->
<template>
  <van-form @submit="onSubmit">
    <tContent title="修改密码">
      <div class="filedBox" slot="pannelContent">
        <!-- 允许输入正整数，调起纯数字键盘 -->
        <van-field
          v-model="oldPsw"
          type="password"
          label="原密码"
          maxlength="16"
          name="oldPsw"
          clearable
          placeholder="请输入原始密码"
          :rules="[{ required: true, message: '请填原始密码' }]"
        />
        <!-- 允许输入数字，调起带符号的纯数字键盘 -->
        <van-field
          v-model="newPsw"
          type="password"
          label="新密码"
          name="newPsw"
          maxlength="16"
          clearable
          placeholder="不超过16位字母数字组合"
          :rules="[{ required: true, message: '请填新密码' }]"
        />
        <!-- 输入密码 -->
        <van-field
          v-model="repeatPsw"
          type="password"
          label="确认密码"
          name="repeatPsw"
          maxlength="16"
          placeholder="不超过16位字母数字组合"
          :rules="[{ required: true, message: '请再次确认新密码' }]"
          clearable
        />
      </div>
      <div slot="otherContent" style="margin:0 16px;">
        <van-button block type="info" native-type="submit">提交</van-button>
      </div>
    </tContent>
  </van-form>
</template>
<script>
import { Toast, Dialog } from 'vant'
import tContent from '@/components/templete/content.vue'
export default {
  name: 'tMain',
  data() {
    return {
      oldPsw: '',
      newPsw: '',
      repeatPsw: ''
    }
  },
  components: {
    tContent
  },
  methods: {
    onSubmit(values) {
      if (values.newPsw !== values.repeatPsw) {
        Toast('两次输入的新密码不一致')
      } else {
        Dialog.confirm({
          title: '提示',
          message: '确定要修改密码吗'
        })
          .then(() => {
            // on confirm
            Toast.success('修改成功!');
          })
          .catch(() => {
            // on cancel
          })
      }
    }
  }
}
</script>
<style lang="less" scoped>
.filedBox {
  padding: @padding-lg*1.5 0;
}
</style>
